<template>
<div>
  <div>
  </div>
  <el-calendar v-model="value" id="calendar" style="height:660px">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
       slot="dateCell"
       slot-scope="{date, data}">
        <!--自定义内容-->
          <div>
              <div class="calendar-day" @click="calClick(data)">{{ data.day.split('-').slice(2).join('-') }}
                <p class="addBtn" v-show="data.isSelected == true" @click="dialogVisible = true">设置</p>
              </div>
                <div v-for="item in calendarData">
                    <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
                      <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                          <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                               <div class="is-selected">可预约人数：{{item.things}}</div>
                          </el-tooltip>
                          <el-tooltip class="item" effect="dark" :content="item.things1" placement="right">
                               <div class="is-selected">已预约人数：{{item.things1}}</div>
                          </el-tooltip>
                      </div>
                      <div v-else></div>
                    </div>
                    <div v-else></div>
              </div>
          </div>
      </template>
  </el-calendar>
  <el-dialog
            :title="formData.orderDate"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form @submit.native.prevent>
                <el-form-item label="可预约人数">
                    <el-input v-model="formData.number"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false;add()">确 定</el-button>
            </span>
          </el-dialog>
</div>
</template>

<script>
import { saveOrderSetting, getOrderSetting } from "@/api/ordersetting";

export default {
  data() {
    return {
      dialogVisible: false,
      formData:{
        orderDate:'',
        number:'',
        reservations:'0'
      },
      calendarData: [
      { months: ['', ''],days: [''],things: '',things1: '' }, 
      ],
      value: new Date()
    };
  },
  methods: {
    ImgUploadSectionFile(param) {
      console.log(param);
      console.log(this.type);
      let formdata = new FormData();
      formdata.append("file", param.file);
    },
    downloadTemplate(){
      window.location.href="/static/ordersetting_template.xlsx";
    },
    handleClose(done){
      console.log(done)
      done()
    },
    calClick(item){
        this.formData.orderDate = item.day
        console.log(this.formData.orderDate);
    },
    select(){
      this.calendarData=[
      { months: ['', ''],days: [''],things: '',things1: '' }, 
      ]
      getOrderSetting()
      .then(response => {
         for(let key  in response.data){
            var newTime = new Date(response.data[key].orderDate);
            var months = newTime.getMonth()+1
            if(months<10){
              months = "0"+months
            }
            var days = newTime.getDate()
            if(days<10){
              days = "0"+days
            }
            var things = response.data[key].number
            var things1 = response.data[key].reservations
            var a ={
              months: [months.toString()],days: [days.toString()],things: things,things1:things1
            }
            this.calendarData.push(a)
         }
      })
      .catch(error => {
        this.outputError(error)        
      }) 
    },
    add(){
      saveOrderSetting(this.formData)
        .then((res) => {
          this.select()
        })
        .catch((error) => {
          this.outputError(error);
        });
    }
  },
  created(){
    this.select()
  }
};
</script>

<style lang="scss">
.el-calendar-table .el-calendar-day {
    height: 180px;
}
</style>

